<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>歌曲管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/font.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/index.css">
<script src="${pageContext.request.contextPath}/back/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/index.js"></script>

</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i></a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
						<form class="layui-form layui-col-space5">
							<div class="layui-inline layui-show-xs-block">
								<input type="text" name="musicName" id="musicName" placeholder="请输入歌曲名"
									autocomplete="off" class="layui-input">
							</div>
							<div class="layui-inline layui-show-xs-block">
							    <!-- 将button设置普通按钮 -->
								<button  class="layui-btn" lay-submit="" lay-filter="sreach" id="search" type="button">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</form>
					</div>
					<div class="layui-card-header">
						<button class="layui-btn"
							onclick="xadmin.open('添加歌曲','./song-add.html')">
							<i class="layui-icon"></i>添加
						</button>
						<button class="layui-btn layui-btn-normal" onclick="Songexp()">
							<i class="layui-icon">&#xe67d;</i>导出数据
						</button>
					</div>
					<div class="layui-card-body layui-table-body layui-table-main">
						<table class="layui-table">
							<thead>
								<tr>
									<th><input type="checkbox" lay-filter="checkall" name=""
										lay-skin="primary"></th>
									<th>歌曲编号</th>
									<th>歌曲名</th>
									<th>歌手名</th> 
									<th>专辑名</th> <!-- 专辑编号转换===可空 -->
									<th>歌曲风格</th>
									<th>发布日期</th>
									<th>上传日期</th>
									<th>点赞数</th>
									<th>播放量</th>
									<th>海报</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
					<!-- --- -->
					<div class="layui-card-body ">
					    
						<div class="page" id="page">
						    <!--  选择条数 -->
							<span class="layui-laypage-limits">
									<select id="select-pageSize">
										<option value="3" >3条/页</option>
										<option value="5">5条/页</option>
										<option value="10">10条/页</option>									
									</select>
							</span>
							
							<div class="layui-box layui-laypage layui-laypage-default" id="page-info">
							    <!--   分页信息是动态渲染 -->
								<span class="layui-laypage-count">共 100 条</span>
								<a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
								<span class="layui-laypage-curr">
									<em class="layui-laypage-em"></em>
									<em>1</em>
								</span>
								<a href="javascript:;" data-page="2">2</a>
								<a href="javascript:;" data-page="3">3</a>
								<a href="javascript:;" data-page="4">4</a>
								<a href="javascript:;" data-page="5">5</a>
							
								<a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="10">10</a>
								<a href="javascript:;" class="layui-laypage-next" data-page="2">下一页</a>							
								
								<span class="layui-laypage-skip">到第
									<input type="text" min="1" value="1" class="layui-input">页
									<button type="button" class="layui-laypage-btn">确定</button>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<!-- 引入jQuery -->
<script src="${pageContext.request.contextPath}/back/js/jquery.js" charset="utf-8"></script>
<script>

//声明全局页码
let pageNum = 1;

$(function(){
	Song_search();
	
	$("#search").click(function(){
		Song_search();
	});
	
	$(document).on("click","#page a",function(){
		pageNum = $(this).data("pagenum");
		Song_search();
	});
	
	$(document).on("change","#select-pageSize",function(){
		$(this).prop("checked",true);
		pageNum = 1;
		Song_search();
	});
	$(document).on("keyup","#input-pageSize",function(){
		let inputSize =  parseInt($(this).val()); 
		let maxSize   =   parseInt($(this).prop("max"));
			
		if(inputSize<1||inputSize>maxSize){
		
		  $(this).val(1); 
		}
	});
	$(document).on("click","#search-pageSize",function(){
		pageNum =  $("#input-pageSize").val(); 
		Song_search();
	});
}) 

/*
 * 歌曲-查询
 */
function Song_search(){
	
	// 发送异步请求
	$.ajax({
		type:"get",
		url:"../music",
		data:{
			op:"pageByCondition",  // 请求实现分页功能的控制器
			musicName:$("#musicName").val(),
			pageNum: pageNum, // 活的页码
		    pageSize: $("#select-pageSize").val() // 活的显示条数
		},
		dataType:"json",
		success:function(result){ // result是一个PageInfo对象
			// 1.更新指定表格中的内容
			let content = "";
		
			// 遍历的是PageInfo对象中的data属性
			$.each(result.data,function(i,Song){
				content += "<tr>"+
					"<td><input type=\"checkbox\" name=\"id\" value=\"1\" lay-skin=\"primary\"></td>"+
					"<td>"+Song.musicId+"</td>"+
					"<td>"+Song.musicName+"</td>"+
					"<td>"+Song.singger.singgerName+"</td>"+
					"<td>"+Song.album.albumName+"</td>"+
					"<td>"+Song.musicStyle.styleName+"</td>"+
					"<td>"+Song.releaseTime+"</td>"+
					"<td>"+Song.createTim+"</td>"+
					"<td>"+Song.likeNumber+"</td>"+
					"<td>"+Song.playVolume+"</td>"+
					"<td><img src=\"../FileDownloadServlet?type=image&fileName=" + Song.musicImgPath + "\"></td>"+
					"<td class=\"td-manage\">"+
					   "<a title=\"编辑\" href=\"javascript:;\" onclick=\"xadmin.open('编辑','song-modify.jsp?musicId="+Song.musicId+"&singgerId="+Song.singger.singgerId+"&albumId="+Song.album.albumId+"','800','510','1')\"class=\"ml-5\" style=\"text-decoration: none\">"+ 
					    "<i class=\"layui-icon\">&#xe642;</i>"+
					   "</a>"+
					   "<a title=\"删除\" href=\"javascript:;\" onclick=\"Song_del('"+Song.musicId+"')\" style=\"text-decoration: none\"> "+
						"<i class=\"layui-icon\">&#xe640;</i>"+
					   "</a>"+
					"</td>"+
				"</tr>";
			});
			
			// 设置表格的内容
			$("tbody").html(content);
			
			// 2.分页信息
			// 拼接总条数
			let pageContent = "<span class=\"layui-laypage-count\">共 "+result.total+" 条</span>";
			// 拼接上一页
			if(result.pageNum == 1){
				// 当前页是第一页
				pageContent += "<span class=\"layui-disabled\" data-pagenum=\"1\">上一页</span>";	
			}else{
				pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-prev\" data-pagenum=\""+(result.pageNum-1)+"\">上一页</a>";	
			}
								
			// 拼接页码,循环总页数
			for(let i = 1; i <= result.pages; i++){
				// 将当前的页码设置为选中效果
				if(i == result.pageNum){
					pageContent += "<span class=\"layui-laypage-curr\">"+
										"<em class=\"layui-laypage-em\"></em>"+
										"<em>"+i+"</em>"+
									"</span>";
				}else{
					pageContent += "<a href=\"javascript:;\" data-pagenum=\""+i+"\">"+i+"</a>"
					
				}
			}
			
			// 拼接下一页
			if(result.pageNum == result.pages){
				// 当前页是最后一页
				pageContent += "<span class=\"layui-disabled\" data-pagenum=\""+result.pages+"\">下一页</span>";	
			}else{
				pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-prev\" data-pagenum=\""+(result.pageNum+1)+"\">下一页</a>";	
			}
			
			// 拼接输入页码框
			pageContent +="<span class=\"layui-laypage-skip\">到第"+
							"<input type=\"text\" min=\"1\" value=\"1\" class=\"layui-input\" max=\""+result.pages+"\" id=\"input-pageSize\">页"+
							"<button type=\"button\" class=\"layui-laypage-btn\" id=\"search-pageSize\">确定</button>"+
						"</span>";
						
		    // 设置分页信息的内容
		    $("#page-info").html(pageContent);
		},
		error:function(){
			alert("异步请求失败!")
		}
	});	
}


/*歌曲-删除*/
function Song_del(musicId) {
	layer.confirm('确认要删除'+musicId+'吗？', {
		icon : 3,
		title : '提示信息'
	}, function(index) {
		// 发送异步请求
		$.ajax({
			type:"get",
			url:"../music",
			data:{
				op:"deleteById",
				musicId:musicId
			},
			dataType:"json",
			success:function(result){
				// 关闭确认框
				layer.close(layer.index);
				// 删除成功提示
				if(result == true){
					 layui.use('layer', function(){
						layer.msg('删除成功!',{icon:1,time:2000});
					});
				}
				// 再次调用商品查询函数
				Song_search();
			}
		});
	});
}

/*歌曲-导出*/
function Songexp() {
	layer.confirm('确认要导出吗？', {
		icon : 3,
		title : '提示信息'
	}, function(index) {
		location.href='../music?op=export';
		// 关闭确认框
		layer.close(layer.index);
		// 删除成功提示
		if(result == true){
			 layui.use('layer', function(){
				layer.msg('删除成功!',{icon:1,time:2000});
			});
		}
	});
}

// -----------------------------------------------------------------------------------------------

	/*用户-停用*/
	function member_stop(obj, id) {
		layer.confirm('确认要停用吗？', {
			icon : 3,
			title : '提示信息'
		}, function(index) {

			if ($(obj).attr('title') == '启用') {

				//发异步把用户状态进行更改
				$(obj).attr('title', '停用')
				$(obj).find('i').html('&#xe62f;');

				$(obj).parents("tr").find(".td-status").find('span').addClass(
						'layui-btn-disabled').html('已停用');
				layer.msg('已停用!', {
					icon : 5,
					time : 1000
				});

			} else {
				$(obj).attr('title', '启用')
				$(obj).find('i').html('&#xe601;');

				$(obj).parents("tr").find(".td-status").find('span')
						.removeClass('layui-btn-disabled').html('已启用');
				layer.msg('已启用!', {
					icon : 5,
					time : 1000
				});
			}

		});
	}



	function delAll(argument) {
		var ids = [];

		// 获取选中的id
		$('tbody input').each(function(index, el) {
			if ($(this).prop('checked')) {
				ids.push($(this).val())
			}
		});

		layer.confirm('确认要删除吗？' + ids.toString(), {
			icon : 3,
			title : '提示信息'
		}, function(index) {
			//捉到所有被选中的，发异步进行删除
			layer.msg('删除成功', {
				icon : 1
			});
			$(".layui-form-checked").not('.header').parents('tr').remove();
		});
	}
</script>
</html>